<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:fragment="comments">
<body>
<div th:replace="comm/tale_comment::tale_comment"></div>
<div th:if="${article.allowComment!=null}" class="comment-allow">
    <div id="comments-content" th:if="${article}!=null">
        <div th:id="${article.id ?: 0}" class="comments-pan">
            <h3>
                <th:block th:text="${comments==null ? 0 : comments.size}"></th:block>
                Comments
            </h3>
            <ul th:if="${comments!=null}" class="comments-reply">
                <th:block th:each="comment :${comments}">
                    <div th:if="${comment.status}=='approved'">
                        <li th:id="'li-comment-'+${comment.id}">
                            <figure th:id="'comment-'+${comment.id}">
                                <img th:src="@{${@commons.gravatar(comment.email)}(s='80',r='G',d='')}" alt=""
                                     class="img-responsive"/>
                            </figure>
                            <section>
                                <h4><a th:href="${comment.url}" target="blank" th:text="${comment.author}"></a></h4>
                                <div class="date-pan">
                                    <th:block th:text="${comment.createTime}"></th:block>
                                </div>
                                <th:block th:utext="${comment.content}"></th:block>
                            </section>
                        </li>
                    </div>
                </th:block>
            </ul>
            <div class="commentys-form">
                <h4>Leave a comment</h4>
                <div class="row">
                    <form id="comment-form" class="comment-form" role="form"
                          onsubmit="return TaleComment.subComment();">
                        <input type="hidden" name="id" id="id"/>
                        <input type="hidden" name="articleId" id="articleId" th:value="${article.id}"/>
                        <input type="hidden" name="csrfToken" th:value="${csrfToken}"/>
                        <div class="col-xs-12 col-sm-4 col-md-4">
                            <input type="text" name="author" maxlength="12" id="author" placeholder="姓名 (*)" required="required"/>
                        </div>
                        <div class="col-xs-12 col-sm-4 col-md-4">
                            <input type="email" name="email" id="email" placeholder="邮箱 (*)" required="required"/>
                        </div>

                        <div class="col-xs-12 col-sm-4 col-md-4">
                            <input type="url" name="url" id="url" placeholder="网址 (http://)"/>
                        </div>

                        <div class="clearfix"></div>

                        <div class="col-xs-12 col-sm-12 col-md-12">
                                <textarea name="content" id="textarea" placeholder="以上信息可以为空,评论不能为空哦!"
                                          required="required" minlength="5"
                                          maxlength="2000">
                                </textarea>
                        </div>
                        <div class="text-center">
                            <input type="submit" value="Post Comment" id="misubmit"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>
